<template>
  <div class="page-wrap">
		<bread :cur-path="{ toPath: '/contact', name: '联系我们' }" />
		<div class="page-main">
			<div class="con-box">
				<div class="main-menu-box">
					<h2>
						<i class="yicon"></i>联系我们
					</h2>
				</div>
				<div class="main shadow-box">
					<h1>
						<span>联系我们</span>
					</h1>
					<div class="main-content">
						<!--地图和联系地址信息-->
						<div class="map-box">
							<div ref="map" class="map"></div>
							<div class="contact-page">
                <h2>联系我们</h2>
                工作时间：周一至周五8:30-17:00<br />
                热线电话：{{ companyInfo.tel }}<br />
                <!-- 传       真：+ 86 0512-62550267<br /> -->
                邮件地址：{{ companyInfo.email }}<br />
                公司地址：{{ companyInfo.address }}
              </div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
/* eslint-disable */
import { Bread } from '@/components/layout'
export default {
  components: {
    Bread
  },
  mounted() {
    this.loadMap()
  },
  computed: {
    companyInfo() {
      return this.$store.state.companyInfo
    }
  },
  methods: {
    loadMap() {
      var map = new BMap.Map(this.$refs.map)
      var point = new BMap.Point(121.496398, 31.24412)
      map.centerAndZoom(point, 15) // 初始化地图,设置中心点坐标和地图级别
      map.addControl(new BMap.NavigationControl())
      map.addControl(new BMap.MapTypeControl()) // 添加地图类型控件
      map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放

      var marker = new BMap.Marker(point) // 创建标注
      map.addOverlay(marker)

      var opts = {
        width: 200, // 信息窗口宽度
        height: 100, // 信息窗口高度
        title: this.companyInfo.companyName, // 信息窗口标题
        enableMessage: false, // 设置允许信息窗发送短信
        message: this.companyInfo.address
      }

      var infoWindow = new BMap.InfoWindow(
        '地址：' + this.companyInfo.address,
        opts
      ) // 创建信息窗口对象
      marker.addEventListener('click', function() {
        map.openInfoWindow(infoWindow, point) // 开启信息窗口
      })
      map.openInfoWindow(infoWindow, point) // 开启信息窗口
    }
  }
}
</script>

<style lang="scss" scoped>
/*地图和联系地址信息*/
.map {
	float: left;
	width: 60%;
	height: 400px;
}
.contact-page {
	float: left;
	width: 40%;
	padding: 0 30px 30px;
	line-height: 30px;
	font-size: 14px;
}
.contact-page > h2 {
	color: #006835;
	font-size: 24px;
	padding-bottom: 15px;
}
</style>
